C<template>
	<view class="edit">
		<view class="bj">
			<view class="line">
				<view class="label">
					头像
				</view>
				<view class="upload" @click="handleUpload">
					<image class="avatar" v-if="form.avatar" :src="form.avatar"></image>
					<view v-else class="upload-cont">
						<image src="@/static/image/add2.png"></image>
						<view class="text">上传图片</view>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="label">
					昵称
				</view>
				<input v-model="form.name" type="text" placeholder="请输入昵称" placeholder-style="color: #BABABA">
			</view>
			<view class="line">
				<view class="label">
					手机号
				</view>
				<input v-model="form.phone" type="text" placeholder="请输入手机号" placeholder-style="color: #BABABA">
			</view>
		</view>
		<up-button type="primary" text="保存" @click="handleSave"></up-button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import user from '@/api/user.js'
	import config from '@/config/config.js'
	import utils from '@/utils/util.js'
	const form = ref({
		name: '',
		avatar: '',
		phone: ''
	})
	onMounted(() => {
		const userInfo = uni.getStorageSync('userInfo')
		form.value = {
			name: userInfo?.name,
			avatar: userInfo?.avatar,
			phone: userInfo?.phone,
		}
	})
	const handleUpload = () => {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths[0];
				uni.uploadFile({
					url: config.baseUrl + 'api/user/uploadFile', //仅为示例，非真实的接口地址
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						if(res.status == 1) {
							form.value.avatar = res.data.fullSrc
						} else {
							utils.toast(res.info)
						}
					},
				})
			}
		});
	}
	const handleSave = async () => {
		const { status, info, data } = await user.editSelfInfo(form.value)
		utils.toast(info)
	}
</script>

<style lang="scss" scoped>
	.edit {
		padding: 38rpx 16rpx;

		.bj {
			background: #fff;
			border-radius: 14rpx;
			margin-bottom: 50rpx;
			padding: 10rpx;

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
				padding: 26rpx;

				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #373737;
					line-height: 33rpx;
				}
				.upload {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					background: #F1EFEF;
					overflow: hidden;
					.avatar {
						width: 100%;
						height: 100%;
					}

					.upload-cont {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: center;
						height: 100%;
						image {
							width: 48rpx;
							height: 48rpx;
						}
						.text {
							margin-top: -20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #BABABA;
							line-height: 23rpx;
						}
					}
				}
				input,
				.value {
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 28rpx;
				}
				.value {
					color: #BABABA;
				}
			}

			.line:last-child {
				border: 0;
			}
		}
	}
</style>